<template>
 <div>
  <!-- 视频对话框 -->
  <el-dialog
  :visible.sync="videoDialogVisible"
  :before-close="handleClose"
  v-if="videoDialogVisible"
  width="45%" hight="45%">
  <video autoplay loop playsinline >
      <source :src="url" >
  </video>
</el-dialog>
 </div>
</template>
<script>
export default {
  name: '',
  props: ['videoDialogVisible', 'url'],
  data () {
    return {

    }
  },
  created () {
  },
  computed: {
  },
  methods: {
    handleClose () {
      this.$emit('close')
    }
  }
}
</script>
<style lang='scss' scoped>
  // 视频
    .el-dialog__wrapper {
     ::v-deep .el-dialog {
          .el-dialog__header {
          background : transparent;
          border-radius: 0 0;
          padding:0 0 ;
          .el-dialog__headerbtn {
           position: absolute;
           top: 5px;
            right: 4px;
            width: 17px;
           height: 16px;
           background: rgba(78, 77, 77, 0.6);
           border-radius: 50%;
           .el-dialog__close {
             color: #fff;
           }
          }
       }
       .el-dialog__body {
            padding: 20px 20px;
            background: #ccc;
            border-radius: 5px;
       }
     }
    }
    video {
        border-radius: 5px;
        width: 100%;
        height: 100%;
      }
</style>
